<template>
	<div>
		<div class="login_head">
			<div class="left">
				<img src="../assets/LOGO.png" style="height: 70%; width: 40%" />
			</div>
			<div class="middle"></div>
			<div class="right">
				<span style="color: rgba(255, 255, 255, 1); margin-right: 4px; font-size: 13px">中文</span>
				<span style="color: rgba(255, 255, 255, 0.5)">|</span>
				<span style="color: rgba(255, 255, 255, 0.5); margin-left: 4px; font-size: 13px">English</span>
			</div>
		</div>
		<div class="login_area">
			<div class="login_inputarea" :style="{ height: height + '%' }">
				<div class="head">华为账号登录</div>
				<div class="input">
					<el-input class="input_item" placeholder="请输入账号" v-model="uname">
						<i slot="prefix" class="el-input__icon el-icon-user" style="color: #1b66c7"></i>
					</el-input>
					<el-input class="input_item" placeholder="请输入密码" v-model="upwd">
						<i slot="prefix" class="el-input__icon el-icon-lock" style="color: #1b66c7"></i>
					</el-input>
					<div class="VerificationCode">
						<div class="left">
							<el-input v-model="VerificationCode" placeholder="请输入验证码"></el-input>
						</div>
						<div class="right">
							<img :src="captcha" @click="getcaptcha" style="height: 100%; width: 70%" />
						</div>
					</div>
					<button @click="Login">登录</button>
					<div class="reg">
						<div class="left">忘记密码?</div>
						<div class="middle"></div>
						<div class="right">
							<span>还没有华为账号?</span>
							<span style="margin-left: 5px; color: #1b66c7; cursor: pointer">注册账号</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getCaptchaCode,
		Login
	} from "../https/api";
	export default {
		name: "Login",
		data() {
			return {
				uname: "",
				upwd: "",
				VerificationCode: "",
				height: 45,
				captcha: null
			};
		},
		methods: {
			// 登录
			async Login() {
				if (!this.uname) {
					this.$message({
						showClose: true,
						message: '用户名为空',
						type: 'warning'
					});
					return
				}
				if (!this.upwd) {
					this.$message({
						showClose: true,
						message: '密码为空',
						type: 'warning'
					});
					return
				}
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				const res = await Login({
					username: this.uname,
					password: this.upwd,
					code: this.VerificationCode
				})
				loading.close();
				if (res.code === 1) {
					// 登录成功
					sessionStorage.setItem('TOKEN', res.data.member_token)
					sessionStorage.setItem('nickname', res.data.member_nickname)
					this.$store.commit('getmembernickname', res.data.member_nickname)
					this.$store.commit('getmemberportrait', res.data.member_portrait)
					this.$message({
						showClose: true,
						message: '登录成功',
						type: 'success'
					});
					this.$router.push({
						path: '/'
					})
				} else {
					if (res.data.message == '验证码不正确!') {
						this.$message({
							showClose: true,
							message: '验证码不正确',
							type: 'warning'
						});
						this.getcaptcha();
						return
					}
					if (res.data.message == '登录失败,您输入的账号或密码不正确!') {
						this.$message({
							showClose: true,
							message: '登录失败,您输入的账号或密码不正确!',
							type: 'warning'
						});
						this.getcaptcha();
						return
					}
				}
			},
			// 获取图片验证码
			async getcaptcha() {
				const res = await getCaptchaCode()
				let imgsrc = window.URL.createObjectURL(res)
				this.captcha = imgsrc
			}
		},
		watch: {

		},
		mounted() {
			this.getcaptcha();
		},
	};
</script>

<style lang="scss" scoped>
	.login_head {
		width: 100%;
		height: calc(7vh);
		background-color: #2b2d33;
		display: flex;

		.left {
			width: 20%;
			padding-left: 20px;
			display: flex;
			align-items: center;
		}

		.middle {
			width: 73%;
		}

		.right {
			width: 7%;
			display: flex;
			align-items: center;
		}
	}

	.login_area {
		width: 100%;
		height: calc(93vh);
		background: url(../../public/images/login_back.jpg);
		background-size: 100%;
		background-repeat: no-repeat;
		display: flex;
		align-items: center;
		justify-content: center;

		.login_inputarea {
			position: relative;
			width: 25%;
			background-color: white;
			border-radius: 0 0 8px 8px;

			.head {
				width: 100%;
				height: 18%;
				background-color: #5297f8;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 16px;
				color: #fff;
			}

			.input {
				width: 95%;
				height: 50%;
				margin: 8% auto 0 auto;

				.input_item {
					margin-bottom: 10px;
				}

				.VerificationCode {
					width: 100%;
					height: 40px;
					margin-bottom: 10px;
					display: flex;

					.left {
						width: 65%;
					}

					.right {
						width: 35%;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				button {
					width: 100%;
					height: 40px;
					background-color: #4090ff;
					border-radius: 5px;
					color: #fff;
					border: medium none;
					margin-bottom: 12px;
					cursor: pointer;
				}

				.reg {
					height: 15px;
					width: 100%;
					display: flex;

					.left {
						width: 20%;
						color: #1b66c7;
						font-size: 12px;
					}

					.middle {
						width: 40%;
					}

					.right {
						font-size: 12px;
						width: 40%;
					}
				}
			}
		}
	}
</style>
